<template>
  <Row :gutter="24">
    <Col :xl="16" :lg="12" :md="24" :sm="24" :xs="24">
      <h4>访问量趋势</h4>
      <div ref="visitChart" v-height="350"></div>
    </Col>
    <Col :xl="8" :lg="12" :md="24" :sm="24" :xs="24">
      <h4>访问量排行</h4>
      <div v-height="350">
        <ul>
          <li v-for="(item, index) in rankData" :key="item">
            <Row type="flex" justify="center" align="middle">
              <Col span="20" style="display: flex">
                <Avatar
                  size="small"
                  v-color="index < 3 ? '#1890ff' : '#8c8c8c'"
                  v-bg-color="index < 3 ? '#e6f7ff' : '#f5f5f5'"
                  class="ivu-mr-8"
                  >{{ index + 1 }}</Avatar
                >
                <Ellipsis :text="item.title" :length="20" tooltip></Ellipsis>
              </Col>
              <Col span="4" class="ivu-text-right">
                <Numeral :value="item.arc_num" format="0,0" />
              </Col>
            </Row>
          </li>
          
        </ul>
      </div>
    </Col>
  </Row>
</template>
<script>
import { viewsReport, viewsRank } from '@/api/workbench'
import dayjs from 'dayjs'
import * as echarts from 'echarts'
export default {
  data () {
    return {
      start_time: '',
      end_time: '',
      rankData: [],
      xAxisWeek: [],
      seriesWeek: []
    }
  },
  methods: {
    handleResize (val) {
      this.start_time = val[0] ? dayjs(val[0]).format('YYYY-MM-DD') : ''
      this.end_time = val[1] ? dayjs(val[1]).format('YYYY-MM-DD') : ''
      // console.log(val,'data')
      this._viewsRank()
      this._viewsReport()
      this.visitChart && this.visitChart.resize()
    },
    //获取访问量排行
    _viewsRank () {
      const params = {
        start_time: this.start_time,
        end_time: this.end_time,
      }
      viewsRank(params).then(res => {
        this.rankData = res
        // console.log(res,'res')
      })
    },
    //获取访问趋势
    _viewsReport () {
      const params = {
        start_time: this.start_time,
        end_time: this.end_time,
      }
      viewsReport(params).then(res => {
        // this.rankData=res
        this.xAxisWeek = res.date
        this.seriesWeek = res.num
        this.handleSetVisitChart()
      })
    },
    handleSetVisitChart () {
      let that = this
      this.visitChart = echarts.init(this.$refs.visitChart)
      this.visitChart.setOption(
        {
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#D7DDE4'
              }
            },
            axisTick: {
              alignWithLabel: true,
              lineStyle: {
                color: '#D7DDE4'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#7F8B9C'
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#F5F7F9'
              }
            },
            // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            data: [...that.xAxisWeek]
          },
          yAxis: {
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#7F8B9C'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#F5F7F9'
              }
            },
            type: 'value'
          },
          series: [{
            // data: [9728, 4578, 12768, 4982, 9665, 5489, 3288, 13422, 6753, 7463, 8162, 6545],
            data: [...that.seriesWeek],
            type: 'bar',
            tooltip: true,
            smooth: true,
            symbol: 'none',
            itemStyle: {
              normal: {
                barBorderRadius: [3, 3, 0, 0],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#69cdff'
                  },
                  {
                    offset: 0.5,
                    color: '#3eb3f7'
                  },
                  {
                    offset: 1,
                    color: '#1495eb'
                  }
                ])
              }
            }
          }],
          color: ['#1495EB', '#00CC66', '#F9D249', '#ff9900', '#9860DF'],
          grid: {
            left: 16,
            right: 25,
            bottom: 5,
            top: 20,
            containLabel: true
          },
          tooltip: {
            trigger: 'axis'
          }
        }
      )
    },

  },
  mounted () {
  },
  beforeUnmount () {
    if (this.visitChart) {
      this.visitChart.dispose()
      this.visitChart = null
    }
  }
}
</script>
<style lang="less">
.dashboard-console-visit {
  ul {
    li {
      list-style-type: none;
      margin-top: 12px;
    }
  }
}
</style>
